<template>
  <!-- 筛选搜索 -->
  <div class="search-box">
    <div class="search1">
      <div class="left">
        <el-icon>
          <Search />
        </el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="right">
        <el-button @click="Reset">重置</el-button>
        <el-button type="primary" @click="searchHandle">查询结果</el-button>
      </div>
    </div>

    <div class="search">
      <div class="search_input">
        <span>输入搜索：</span>
        <el-input placeholder="输入搜索" v-model="form.keyword"></el-input>
      </div>
      <div class="search_input">
        <span>商品货号：</span>
        <el-input placeholder="商品货号" v-model="form.productSn"></el-input>
      </div>
      <div class="search_input">
        <span>商品分类：</span>
        <el-select class="m-2" placeholder="请选择" v-model="form.productCategoryId">
          <el-option v-for="item in childrenList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <div class="search_input">
        <span>商品品牌：</span>
        <el-select class="m-2" placeholder="请选择品牌" v-model="form.brandId">
          <el-option v-for="item in brandName" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <div class="search_input">
        <span>上架状态：</span>
        <el-select class="m-2" placeholder="全部" v-model="form.publishStatus">
          <el-option v-for="item in up" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="search_input">
        <span>审核状态：</span>
        <el-select class="m-2" placeholder="全部" v-model="form.verifyStatus">
          <el-option v-for="item in shen" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
  </div>
  <!-- 数据列表 -->
  <div class="search-box">
    <div class="search2">
      <div class="left">
        <el-icon>
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="right">
        <el-button @click="router.push('/pms/addProduct')">添加</el-button>
      </div>
    </div>
  </div>
  <!-- 数据 -->
  <div class="data">
    <el-table :data="list" border table-layout="auto" cell-class-name="align-c"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" prop="id" />
      <el-table-column label="商品图片" width="120">
        <template #default="{ row }">
          <el-image v-if="row.pic" :src="row.pic" style="width: 80px; height: 80px" />
          <el-image v-if="!row.pic" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name">
        <template #default="{ row }">
          <span>{{ row.name }}</span><br />
          <span>品牌：{{ row.brandName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格/货号" prop="sort">
        <template #default="{ row }">
          <span>价格：￥{{ row.price }}</span><br />
          <span>货号：{{ row.productSn }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标签">
        <template #default="{ row }">
          <div>
            上架:
            <el-switch size="large" v-model="row.publishStatus" :active-value="1" :inactive-value="0"
              @click="ground([row.id], row.publishStatus)" />
          </div>

          <div>
            新品:
            <el-switch size="large" v-model="row.newStatus" :active-value="1" :inactive-value="0"
              @click="news([row.id], row.newStatus)" />
          </div>

          <div>
            推荐:
            <el-switch size="large" v-model="row.recommandStatus" :active-value="1" :inactive-value="0"
              @click="recommend([row.id], row.recommandStatus)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" />
      <el-table-column label="SKU库存" prop="stock">
        <template #default="{ row }">
          <el-button type="primary" :icon="EditPen" size="large" circle @click="SKUfn(row)" />
        </template>
      </el-table-column>
      <el-table-column label="销量" prop="sale" />
      <el-table-column label="审核状态" prop="verifyStatus">
        <template #default="{ row }">
          <span>{{ row.verifyStatus === 0 ? "未审核" : "审核通过" }}</span><br />
          <span style="color: #409eff">审核详情</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button>编辑</el-button><br />
          <el-button type="danger" @click="del([row.id])">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="bottom">
    <!-- 批量操作 -->
    <div class="some">
      <el-select class="m-2" placeholder="批量操作" v-model="select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button type="primary" style="margin-left: 10px" @click="operation">确定</el-button>
    </div>
    <!-- 分页 -->


      <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50, 100]"
        background layout="total,sizes, prev, pager, next, jumper" :total="total" @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle" />


    <!-- 弹出框 -->
    <Sku :show="editShow" :pid="editId" @hide="editHide" />
  </div>
</template>
<script setup lang="ts">
import { Tickets, Search, EditPen } from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider, ElMessage, ElMessageBox } from "element-plus";
import useTable from "@/hooks/useTable";
import { reactive, ref } from "vue";
import { getProductListApi, getBrandListAPI, withChildrenListApi, publishStatusApi, recommendStatusApi, newStatusApi, delStatusApi } from "./api";
import { useRouter } from "vue-router";
import Sku from './sku.vue'


interface User {
  id: number
}

const router = useRouter();
// 请求带的数据
const form = reactive<IListParams>({
  brandId: "",//商品品牌编号
  keyword: "",//商品名称模糊关键字
  productCategoryId: "",//商品分类编号
  productSn: "",//商品货号
  publishStatus: "",//上架状态
  verifyStatus: "",//审核状态
});
// 批量操作选择框选中数据
const select = ref()
// 品牌数据
const brandName = ref<any[]>([]);

const childrenList = ref<IwithChildren[]>([]);
// 请求商品列表数据
const {
  list,
  pageNum,
  pageSize,
  total,
  pageChangeHandle,
  pageSizeChangeHandle,
  searchHandle,
} = useTable(getProductListApi, form);
console.log(list.value);

// 商品品牌
getBrandListAPI({
  pageNum: 1,
  pageSize: 100,
}).then((res) => {
  if (res.code === 200) {
    brandName.value = res.data.list;

  }
});

// 商品分类
withChildrenListApi().then((res) => {
  childrenList.value = res.data;
});

// 上架状态
const up = ref([
  {
    value: 1,
    label: "上架",
  },
  {
    value: 0,
    label: "下架",
  },
]);

// 审核状态
const shen = ref([
  {
    value: 0,
    label: "未审核",
  },
  {
    value: 1,
    label: "审核通过",
  },
]);

// 批量
const options = ref([
  {
    value: 0,
    label: "商品上架",
  },
  {
    value: 1,
    label: "商品下架",
  },
  {
    value: 2,
    label: "设为推荐",
  },
  {
    value: 3,
    label: "取消推荐",
  },
  {
    value: 4,
    label: "设为新品",
  },
  {
    value: 5,
    label: "取消新品",
  },
  {
    value: 6,
    label: "转移到分类",
  },
  {
    value: 7,
    label: "移入回收站",
  },
]);

// 重置
const Reset = () => {
  form.brandId = "";
  form.keyword = "";
  form.productCategoryId = "";
  form.productSn = "";
  form.publishStatus = "";
  form.verifyStatus = "";
  searchHandle()
}

// 点击上架
const ground = (ids: number[], publishStatus: number) => {
  publishStatusApi(ids, publishStatus).then((res) => {
    ElMessage.success("状态修改成功")
    searchHandle()
  }).catch(() => {
    ElMessage.error("状态修改失败")
  })

}



// 点击新品
const news = (ids: number[], newStatus: number) => {
  newStatusApi(ids, newStatus).then((res) => {
    ElMessage.success("状态修改成功")
    searchHandle()
  }).catch(() => {
    ElMessage.error("状态修改失败")
  })
}

// 点击推荐
const recommend = (ids: number[], recommandStatus: number) => {
  recommendStatusApi(ids, recommandStatus).then((res) => {
    ElMessage.success("状态修改成功")
    searchHandle()
  }).catch(() => {
    ElMessage.error("状态修改失败")
  })
}


// 点击删除
const del = (ids: number[]) => {
  ElMessageBox.confirm('确定要删除选中的商品属性吗', '删除商品属性', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
  }).then(() => {
    delStatusApi(ids).then((res) => {
      ElMessage.success("删除成功")
      searchHandle()
    }).catch(() => {
      ElMessage.error("删除失败")
    })
  }).catch(() => {
    ElMessage.success('已经取消删除')

  })

}

const multipleSelection = ref<number[]>([])
const handleSelectionChange = (val: User[]) => {
  console.log(val);
  multipleSelection.value = val.map(item => item.id)
}


// 批量操作
const operation = () => {
  if (select.value == undefined) {
    ElMessage.warning("请选择操作类型")
  }
  else if (multipleSelection.value.length == 0) {
    ElMessage.warning("请选择要操作的商品")
  } else {
    if (select.value === 0) {
      ground(multipleSelection.value, 1)
    } else if (select.value === 1) {
      ground(multipleSelection.value, 0)
    } else if (select.value === 2) {
      recommend(multipleSelection.value, 1)
    } else if (select.value === 3) {
      recommend(multipleSelection.value, 0)
    } else if (select.value === 4) {
      news(multipleSelection.value, 1)
    } else if (select.value === 5) {
      news(multipleSelection.value, 0)
    } else if (select.value === 6) {
      searchHandle()
    } else {
      del(multipleSelection.value)
    }
  }

}

const editShow = ref<boolean>(false)
const editId = ref<number>()

// 点击库存
const SKUfn = (row: IProductModel) => {
  editShow.value = true;
  editId.value = row.id;
  console.log(row.id);

};

const editHide = (val: boolean) => {
  editShow.value = false;
  editId.value = 0;
  if (val) searchHandle()
}


</script>
<style lang="less" scoped>
.search-box {
  box-shadow: 0 0 10px 0px #ccc;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;

  .search1 {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
  }

  .search {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(3, 33%);

    .search_input {
      display: flex;
      margin-right: 20px;
      align-items: center;
      width: 300px;
      margin-left: 40px;
      margin-bottom: 20px;

      span {
        width: 125px;
        margin-right: 12px;
      }
    }
  }

  .search2 {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      span {
        line-height: 20px;
        font-size: 16px;
        align-items: center;
      }
    }
  }

  :deep(.el-select) {
    width: 300px;
  }
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

:deep(.is-leaf) {
  text-align: center !important;
}

:deep(.align-c),
:deep(.cell) {
  text-align: center;
  font-size: 16px;
}
</style>
